<template>
  <a-card>
    <template #title>
      <a-form>
        <a-row :gutter="16">
          <a-col :md="6" :xs="24">
            <a-form-item label="角色名称">
              <a-select v-model:value="page.rid" allowClear>
                <a-select-option v-for="item in roleList" :key="item.id" :value="item.id">{{
                    item.name
                  }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :xs="24">
            <a-form-item label="状态">
              <a-select v-model:value="page.status" allowClear
                        :options="[{label:'启用',value:1},{label:'禁用',value:0}]"/>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col style="text-align: right" :span="24">
            <a-button type="primary" @click="getTableData">查询</a-button>
            <a-button style="margin-left: 10px" @click="resetSearch">重置</a-button>
          </a-col>
        </a-row>
      </a-form>
    </template>
    <div style="margin-bottom: 10px;text-align: right">
      <a-button type="primary" @click="addStaff" v-permiss="['add']">添加用户</a-button>
    </div>
    <a-table row-key="id" :columns="tableColumn" :pagination="pagination" :data-source="tableData" :scroll="{x:1000}">
      <template #operation="{record }">
        <a-button type="link" @click="editStaff(record)" v-permiss="['update']">修改</a-button>
      </template>
      <template #status="{record }">
        <a-switch :checked="record.status === 1" @change="changeStatus(record)"></a-switch>
      </template>
    </a-table>
    <a-modal v-model:visible="visible.isShow" :title="visible.title" :afterClose="clearForm" @ok="staffConfirm"
             :maskClosable="false">
      <a-form :rules="staffRulesForm" :model="staffForm" ref="formRef" :label-col="{span:5}">
        <a-form-item label="姓名" name="realName">
          <a-input v-model:value="staffForm.realName"/>
        </a-form-item>
        <a-form-item label="密码" name="password">
          <a-input v-model:value="staffForm.password"/>
        </a-form-item>
        <a-form-item label="账号" name="userName">
          <a-input v-model:value="staffForm.userName" :disabled="visible.type === 'edit'"/>
        </a-form-item>
        <a-form-item label="手机端访问" name="isMobile">
          <a-radio-group v-model:value="staffForm.isMobile">
            <a-radio :value="1">可以访问</a-radio>
            <a-radio :value="2">不可访问</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="手机端业务查看" name="show" v-if="staffForm.isMobile === 1">
          <a-select v-model:value="staffForm.show">
            <a-select-option :value="9">全部显示</a-select-option>
            <a-select-option :value="1">业务</a-select-option>
            <a-select-option :value="2">财务</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="选择角色" name="usergroupId">
          <a-select v-model:value="staffForm.usergroupId">
            <a-select-option v-for="item in roleList" :key="item.id" :value="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="状态" name="status">
          <a-radio-group v-model:value="staffForm.status">
            <a-radio :value="1">开启</a-radio>
            <a-radio :value="2">关闭</a-radio>
          </a-radio-group>
        </a-form-item>

        <a-form-item label="备注">
          <a-textarea :rows="4" v-model:value="staffForm.remarks"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
import {reactive, ref, toRefs, onMounted, computed} from 'vue'
import {
  fetchUserList,
  increaseUser,
  updateUser,
  staffUpdateStatus,
  resetPassword,
  fetchRoleList
} from "../../../api/authority";
import {message, Modal} from "ant-design-vue";

const tableColumn = [
  {title: '员工姓名', dataIndex: 'realName', width: 150, align: 'center'},
  {title: '账号', dataIndex: 'userName', width: 100, align: 'center'},
  {title: '角色名称', dataIndex: 'groupName', width: 100, align: 'center'},
  {title: '备注', dataIndex: 'desc', width: 200, align: 'center'},
  {
    title: '状态', dataIndex: 'status', width: 100, align: 'center', customRender: ({text}) => {
      return text === 1 ? '开启' : '关闭'
    }
  },
  {title: '创建时间', dataIndex: 'createTime', width: 150, align: 'center'},
  {title: '操作', width: 100, align: 'center', fixed: 'right', slots: {customRender: 'operation',}},
]
export default {
  name: "UserManage",
  setup() {
    const formRef = ref(null)
    const state = reactive({
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      visible: {
        isShow: false,
        type: '',
        title: ''
      },
      staffForm: {
        isMobile: 1,
        status: 1
      },
      staffRulesForm: {
        realName: [
          {required: true, message: '不能为空', trigger: 'blur'},
        ],
        username: [
          {required: true, message: '不能为空', trigger: 'blur'},
        ],
        password: [
          {required: true, message: '不能为空', trigger: 'blur'},
        ],
        usergroupId: [
          {required: true, message: '不能为空', trigger: 'change', type: 'number'},
        ],
      },
      tableData: [],
      roleList: []
    })
    const pagination = computed(() => ({
      current: state.page.pageNum,
      total: state.page.total,
      pageSize: state.page.pageSize,
      showSizeChanger: true,
      showQuickJumper: true,
      pageSizeOptions: ['10', '50', '100', '200'],
      showTotal: total => total + '条',
      onChange: (page) => {
        state.page.pageNum = page
        method.getTableData()
      },
      onShowSizeChange: (page, size) => {
        state.page.pageNum = page
        state.page.pageSize = size
        method.getTableData()
      }
    }))
    const method = {
      async getTableData() {
        const res = await fetchUserList(state.page)
        if (res.code === 200) {
          const {list, total} = res.data
          state.tableData = list
          state.page.total = total
        }
      },
      async getRoleList() {
        const res = await fetchRoleList({
          pageNum: 1,
          pageSize: 100,
        })
        if (res.code === 200) {
          const {list} = res.data
          state.roleList = list
        }
      },
      resetSearch() {
        state.page = {
          pageNum: 1,
          pageSize: 10,
          total: 0
        }
        method.getTableData()
      },
      clearForm() {
        state.staffForm = {
          isMobile: 1,
          status: 1
        }
        formRef.value.resetFields()
      },

      addStaff() {
        state.visible = {
          isShow: true,
          type: 'add',
          title: '添加用户'
        }

      },
      editStaff(rows) {
        state.visible = {
          isShow: true,
          type: 'edit',
          title: '编辑用户'
        }
        state.staffForm = {...rows, status: rows.status ? 1 : 2, usergroupId: rows.usergroupId}
      },
      staffConfirm() {
        formRef.value.validate().then(async () => {
          const api = ((params) => state.visible.type === 'add' ? increaseUser(params) : updateUser(params))
          const res = await api(state.staffForm)
          if (res.code === 200) {
            state.visible.isShow = false
            message.success(state.visible.type === 'add' ? '添加成功' : '编辑成功')
            method.getTableData()
          }
        })
      },
      changeStatus({systemUserId, status}) {
        Modal.confirm({
          title: '确认进行此操作' + '?',
          async onOk() {
            const res = await staffUpdateStatus({id: systemUserId, status: status === 1 ? 0 : 1})
            if (res.code === 200) {
              message.success('操作成功')
              method.getTableData()
            }
          },
        });
      }
    }
    onMounted(() => {
      method.getTableData()
      method.getRoleList()
    })
    return {
      tableColumn,
      formRef,
      pagination,
      ...method,
      ...toRefs(state)
    }
  }
}
</script>

<style scoped>

</style>
